<template>
  <div class="RegisterComponent_container">

    <div class="login_container_right_main_header2">
      注册账号
    </div>
    <div class="login_container_right_main_input register_steps" :class="[!isAuthentication?'skipStep':'']">
      <!-- <img :src="imgUrl" alt=""> -->
      <el-steps :active="registerStep" align-center>
        <el-step v-for="(item,index) in registerList" :key="index" :title="item">
          <svg-icon v-if="index+1>registerStep||(registerStep>3&&index==2&&isAuthentication==false)" slot="icon" style="font-size:40px" icon-class="灰色" />
          <svg-icon v-else-if="index+1==registerStep" slot="icon" style="font-size:40px" icon-class="蓝色" />
          <svg-icon v-else-if="index+1<registerStep||registerStep==5" slot="icon" style="font-size:40px" icon-class="进度完成" />
        </el-step>
      </el-steps>
    </div>
    <div v-if="registerSteps==0" v-loading="loading" class="login_container_right_main_step1">
      <div>
        <div class="login_container_right_main_input3">
          <div class="label">企业名称</div>
          <el-input v-model="formData.companyName" placeholder="请输入企业名称" />
        </div>
        <div class="login_container_right_main_input3">
          <div class="label">姓名</div>
          <el-input v-model="formData.realName" placeholder="请输入姓名" />
        </div>
        <div class="login_container_right_main_input3">
          <div class="label">手机号</div>
          <el-input v-model="formData.phone" placeholder="请输入手机号" />
        </div>
        <div class="login_container_right_main_input3">
          <div class="label">短信验证码</div>
          <div class="login_container_right_main_input2" :class="[leftSecond==0?'unSendClass':'sendClass']">
            <el-input v-model="formData.code" placeholder="请输入验证码" @keyup.enter.native="registerNext" />
            <!-- <div class="login_container_right_main_input2_separate" /> -->
            <div v-if="leftSecond==0" class="login_container_right_main_input2_getCode canClick" @click="sendVerify">发送验证码</div>
            <div v-else class="login_container_right_main_input2_getCode">{{ leftSecond }} 秒后重新发送</div>
          </div>
        </div>
        <div class="agreement">
          <el-checkbox v-model="hasRead" />
          <span style="margin-left:10px">我已阅读并同意云耀生产管理系统</span>
          <span class="agree" @click="gotoAgreement">用户协议</span>
          <span>、</span>
          <span class="agree" @click="gotoPolicy">隐私政策</span>
        </div>
      </div>
      <div class="login_container_right_main_button">
        <el-button @click.native="registerNext">下一步</el-button>
      </div>
    </div>
    <div v-if="registerSteps==1" v-loading="loading" class="login_container_right_main_step2 minHeight">
      <el-form ref="form" :model="formData" :rules="rules" :inline="true" label-width="116px">
        <el-form-item prop="password" label="输入密码">
          <el-input v-model="formData.password" placeholder="请设置至少8位密码，需同时包含数字、字母" />
        </el-form-item>
        <el-form-item prop="password2" label="再次输入密码">
          <el-input v-model="formData.password2" placeholder="再次输入密码" />
        </el-form-item>
      </el-form>
      <div class="login_container_right_main_button">
        <el-button @click.native="doRegister">下一步</el-button>
      </div>
    </div>
    <div v-if="registerSteps==3" v-loading="loading" class="login_container_right_main_step1">
      <el-form ref="form2" :model="form" :rules="rules" label-width="120px" style="margin-top: 20px;">
        <div class="way">
          <el-form-item label="选择认证方式">
            <el-radio-group v-model="form.authType" @change="changeAuthType">
              <el-radio label="1">法人身份信息认证</el-radio>
              <el-radio label="2">对公打款认证</el-radio>
            </el-radio-group>
          </el-form-item>
        </div>
        <div v-if="form.authType==1" class="minHeight">
          <el-form-item label="企业全称">
            <el-input v-model="form.companyName" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="企业法人">
            <el-input v-model="form.operName" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="法人身份证号">
            <el-input v-model="form.operIdCard" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="法人手机号">
            <el-input v-model="form.operPhone" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="短信验证码" style="margin-bottom:10px">
            <div class="login_container_right_main_input2" :class="[leftSecond==0?'unSendClass':'sendClass']">
              <el-input v-model="form.code" placeholder="请输入验证码" />
              <!-- <div class="login_container_right_main_input2_separate" /> -->
              <div v-if="leftSecond==0" class="login_container_right_main_input2_getCode canClick" @click="sendVerify2">发送验证码</div>
              <div v-else class="login_container_right_main_input2_getCode">{{ leftSecond }} 秒后重新发送</div>
            </div>
          </el-form-item>
          <div class="seeRule" @click="seeRules('1')">查看规则</div>
        </div>
        <div v-else class="minHeight">
          <el-form-item label="开户名称">
            <el-input v-model="form.accountName" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="开户银行">
            <el-input v-model="form.bankName" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="企业对公卡号" style="margin-bottom:10px">
            <el-input v-model.number="form.bankIdCard" oninput="value=value.replace(/[^0-9]/g,'')" placeholder="请输入" />
          </el-form-item>
          <div class="seeRule" @click="seeRules('2')">查看规则</div>
        </div>

      </el-form>

      <div class="main_bottomss">
        <el-button type="cancel" @click.native="skipStep">跳过</el-button>
        <el-button @click.native="nextStep">下一步</el-button>
      </div>
    </div>
    <div v-if="registerSteps==5" class="backToLogin">
      <div class="backToLogin_success animate__animated animate__bounceIn">
        <svg-icon icon-class="已认证" />
        <div class="tip_success">注册成功</div>
        <div v-if="!isAuthentication" class="tip">可登录系统后完成企业认证</div>
        <div v-else class="tip">企业认证结果可登录系统后查看</div>
      </div>
      <div class="login_container_right_main_button">
        <el-button @click.native="backToLogin">前往登录</el-button>
      </div>
    </div>
    <div v-if="registerSteps!=5" class="login_container_right_main_register">
      已有账号？
      <a class="login_container_right_main_register_register" @click="typeChange('1')">前往登录</a>
    </div>
  </div>
</template>

<script>
import { register, sendPhoneCode, checkCode, loginV2 } from '@/api/common/login'
import CryptoJS from 'crypto-js'
import defaultSettings from '@/settings'
import axios from 'axios'
import SeeRule from './SeeRule.vue'
// import { getToken, setToken, removeToken } from '@/utils/auth'
import 'animate.css'
export default {
  name: 'RegisterComponent',
  data() {
    // 自定义表单验证
    const validate_password = (rule, value, callback) => {
      const reg = /^(?=.*[A-Za-z])(?=.*\d)[^]{8,}$/
      if (!value) {
        callback('密码不能为空')
      } else if (!reg.test(this.formData.password)) {
        callback('密码限制至少8位，需同时包含数字、字母。')
      } else {
        callback()
      }
    }
    const validate_password2 = (rule, value, callback) => {
      if (value == '') {
        callback('请再次输入密码')
      } else if (value !== this.formData.password) {
        callback('两次输入密码不一致')
      } else {
        callback()
      }
    }
    return {
      hasRead: false,
      registerList: ['基础信息', '设置密码', '企业认证', '注册完成'],
      isAuthentication: false,
      formData: {
        companyName: '',
        username: '',
        realName: '',
        phone: '',
        password2: '',
        password: '',
        code: ''
      },

      form: {
        authType: '1',
        companyName: '',
        operName: '',
        operIdCard: '',
        operPhone: '',
        accountName: '',
        bankName: '',
        bankIdCard: '',
        code: ''
      },
      loginData: { username: '', password: '' },
      leftSecond: 0,
      registerSteps: 0,
      registerStep: 1,
      timer: undefined,
      loading: false,
      rules: {
        password: [
          { validator: validate_password, trigger: 'change' }
        ],
        password2: [
          { validator: validate_password2, trigger: 'change' }
        ]
      }
    }
  },
  mounted() {
  },
  destroyed() {
  },
  methods: {
    gotoAgreement() {
      window.open('https://nfs.cascadeiot.com/public/doc1.pdf', '_blank')
    },
    gotoPolicy() {
      window.open('https://nfs.cascadeiot.com/public/doc2.pdf', '_blank')
    },
    seeRules(e) {
      this.$layer.iframe({// 弹框
        content: {
          content: SeeRule, // 传递的组件对象
          parent: this, // 当前的vue对象
          data: {
            num: e
          }// props
        },
        area: ['440px', '260px'],
        title: '查看规则', // 标题
        shadeClose: false // 点击遮罩是否关闭
      })
    },
    skipStep() {
      this.registerStep = 5
      this.registerSteps = 5
    },
    changeAuthType() {
      Object.keys(this.form).forEach(key => {
        if (key != 'authType') {
          this.form[key] = ''
        }
      })
    },
    nextStep() {
      if (this.checkForm2()) {
        loginV2(this.formData).then(res => {
          var config = {
            headers: {
              'Content-Type': 'application/json',
              Authorization: res.token
            }
          }
          if (this.form.authType == '1') {
            axios.post('/common/system/company/auth/checkAuthCode', { ...this.form, companyId: res.companyId }, config).then(res2 => {
              switch (res2.data.code) {
                case 200:
                  // this.$message({
                  //   message: res2.data.msg,
                  //   type: 'success'
                  // })
                  axios.post('/common/system/company/auth', { ...this.form, companyId: res.companyId }, config).then(res3 => {
                    switch (res3.data.code) {
                      case 200:
                        this.$message({
                          message: res3.data.msg,
                          type: 'success'
                        })
                        this.registerStep = 5
                        this.registerSteps = 5
                        this.isAuthentication = true
                        break
                      default:
                        this.$message({
                          message: res3.data.msg,
                          type: 'error'
                        })
                    }
                  })

                  break
                default:
                  this.$message({
                    message: res2.data.msg,
                    type: 'error'
                  })
              }
            })
          } else {
            axios.post('/common/system/company/auth/remit', { ...this.form, companyId: res.companyId }, config).then(res2 => {
              switch (res2.data.code) {
                case 200:
                  this.$message({
                    message: res2.data.msg,
                    type: 'success'
                  })
                  this.registerStep = 5
                  this.registerSteps = 5
                  this.isAuthentication = true
                  break
                default:
                  this.$message({
                    message: res2.data.msg,
                    type: 'error'
                  })
              }
            })
          }
        })
      }
    },

    checkForm2() {
      if (!this.form.companyName && this.form.authType == '1') {
        this.$message({
          message: '请输入企业全称',
          type: 'warning'
        })
        return false
      }
      if (!this.form.operName && this.form.authType == '1') {
        this.$message({
          message: '请输入法人名称',
          type: 'warning'
        })
        return false
      }

      if (!this.form.operIdCard && this.form.authType == '1') {
        this.$message({
          message: '请输入法人身份证号',
          type: 'warning'
        })
        return false
      }
      // 身份证号正则表达式示例
      const IDCard_RGEX = /(^\d{15})|(^\d{17}(x|X|\d))/
      if (!IDCard_RGEX.test(this.form.operIdCard) && this.form.authType == '1') {
        this.$message({
          message: '请输入正确的身份证号',
          type: 'warning'
        })
        return false
      }
      if (!this.form.operPhone && this.form.authType == '1') {
        this.$message({
          message: '请输入法人手机号',
          type: 'warning'
        })
        return false
      }
      const reg = /^1(3\d|4[5-9]|5[0-35-9]|6[2567]|7[0-8]|8\d|9[0-35-9])\d{8}$/
      if (!reg.test(this.form.operPhone) && this.form.authType == '1') {
        this.$message({
          message: '请输入正确的手机号',
          type: 'warning'
        })
        return
      }
      if (!this.form.code && this.form.authType == '1') {
        this.$message({
          message: '请输入验证码',
          type: 'warning'
        })
        return false
      }
      if (!this.form.accountName && this.form.authType == '2') {
        this.$message({
          message: '请输入开户名称',
          type: 'warning'
        })
        return false
      }
      if (!this.form.bankName && this.form.authType == '2') {
        this.$message({
          message: '请输入开户银行',
          type: 'warning'
        })
        return false
      }
      if (!this.form.bankIdCard && this.form.authType == '2') {
        this.$message({
          message: '请输入对公银行帐号',
          type: 'warning'
        })
        return false
      }
      // const regBankId = /^([1-9]{1})(\d{15}|\d{18})$/
      // if (!regBankId.test(this.form.bankIdCard) && this.form.authType == '2') {
      //   this.$message({
      //     message: '请输入正确的银行卡号',
      //     type: 'warning'
      //   })
      //   return
      // }
      return true
    },
    sendVerify2() {
      if (this.leftSecond !== 0) {
        return
      }

      if (!this.form.operPhone) {
        this.$message({
          message: '请输入手机号',
          type: 'warning'
        })
        return
      }
      const reg = /^1(3\d|4[5-9]|5[0-35-9]|6[2567]|7[0-8]|8\d|9[0-35-9])\d{8}$/
      if (!reg.test(this.form.operPhone)) {
        this.$message({
          message: '请输入正确的手机号',
          type: 'warning'
        })
        return
      }
      sendPhoneCode({ phone: this.form.operPhone }).then(res => {
        if (res) {
          this.startTimer()
        }
      })
    },
    sendVerify() {
      if (this.leftSecond !== 0) {
        return
      }

      if (!this.formData.phone) {
        this.$message({
          message: '请输入手机号',
          type: 'warning'
        })
        return
      }
      const reg = /^1(3\d|4[5-9]|5[0-35-9]|6[2567]|7[0-8]|8\d|9[0-35-9])\d{8}$/
      if (!reg.test(this.formData.phone)) {
        this.$message({
          message: '请输入正确的手机号',
          type: 'warning'
        })
        return
      }
      sendPhoneCode({ phone: this.formData.phone }).then(res => {
        if (res) {
          this.startTimer()
        }
      })
    },
    startTimer() { // 开始定时器
      this.leftSecond = 60
      this.timer = setInterval(() => {
        this.leftSecond--
        if (this.leftSecond == 0) {
          this.stopTimer()
        }
      }, 1000)
    },
    stopTimer() { // 关闭定时器
      if (this.timer) {
        clearInterval(this.timer)
      }
    },
    checkForm() {
      if (!this.formData.companyName) {
        this.$message({
          message: '请输入企业名称',
          type: 'warning'
        })
        return false
      }
      if (!this.formData.realName) {
        this.$message({
          message: '请输入姓名',
          type: 'warning'
        })
        return false
      }
      if (!this.formData.phone) {
        this.$message({
          message: '请输入手机号',
          type: 'warning'
        })
        return false
      }

      const reg = /^1(3\d|4[5-9]|5[0-35-9]|6[2567]|7[0-8]|8\d|9[0-35-9])\d{8}$/
      if (!reg.test(this.formData.phone)) {
        this.$message({
          message: '请输入正确的手机号',
          type: 'warning'
        })
        return
      }
      if (!this.formData.code) {
        this.$message({
          message: '请输入验证码',
          type: 'warning'
        })
        return false
      }
      return true
    },
    backToLogin() {
      this.$router.replace({ path: '/login', query: {}})
      setTimeout(() => {
        location.reload()
      }, 200)
      // window.location.href=window.location.host
    },
    // aes解密
    decrypt(word, keyStr) {
      keyStr = keyStr || 'absoietlj32fai12'
      var key = CryptoJS.enc.Utf8.parse(keyStr)
      var decrypt = CryptoJS.AES.decrypt(word, key, {
        mode: CryptoJS.mode.ECB,
        padding: CryptoJS.pad.Pkcs7
      })
      return CryptoJS.enc.Utf8.stringify(decrypt).toString()
    },
    doRegister() { // 注册按钮
      this.$refs['form'].validate(valid => {
        if (valid) {
          this.loading = true
          this.formData.username = this.formData.phone
          if (this.$route.query.key) {
            var key = this.$route.query.key.replace(/[\s]/g, '+')
            if (JSON.parse(this.decrypt(key, defaultSettings.aesKey))) {
              const json = JSON.parse(this.decrypt(key, defaultSettings.aesKey))
              this.formData = { ...this.formData, ...json }
            }
          }
          // this.loginData.password = this.$deepClone(this.formData.password)
          register(this.formData).then(res => {
            // 2023年2月21日16:20:17 注册后不直接登陆了，返回手动登陆
            this.registerSteps = 3
            this.registerStep = 3
            this.$store.dispatch('user/logout')
            // 退出后登录直接打开主页面
            // this.$router.push(`/login`)

            // if (res && res.token) {
            //   this.$store.state.user.token = res.token
            //   setToken(res.token) // token存入cookie

            //   this.$router.push({
            //     // path: this.redirect || '/homePage',
            //     path: this.redirect || '/',
            //     query: this.otherQuery
            //   })
            // }
          }).finally(() => {
            this.loading = false
          })
        }
      })
    },
    registerNext() { // 下一步
      if (this.checkForm()) {
        if (!this.hasRead) {
          this.$message.warning('请勾选同意云耀生产管理系统《服务条款》')
          return
        }
        this.loading = true
        // this.loginData.username = this.$deepClone(this.formData.phone)
        checkCode(this.formData).then(res => {
          this.registerSteps = 1
          this.registerStep = 2
          this.leftSecond = 0
          this.stopTimer()
        }).finally(() => {
          this.loading = false
        })
      }
    },

    typeChange(type) {
      this.$parent.typeChange(type)
    }
  }
}
</script>

<style lang="less" scoped>
.agreement{
  margin-top: 15px;
  display: flex;
  align-items: center;
  font-size: 14px;
  .agree{
    color: #387BFC;
    cursor: pointer;
    border-bottom: 1px solid rgba(57, 125, 255, 1);
  }
}
.backToLogin{
  /deep/ .svg-icon{
    margin-bottom: 0 !important;
    font-size: 120px !important;
  }
}
/deep/ .el-step__line-inner{
  height: 4px !important;
  background-color: #1890ff;
}
/deep/ .el-step__line {
    height: 4px !important;
    top: 10px !important;
}
.skipStep{
  /deep/ .el-steps :nth-child(3) .el-step__title.is-finish{
  color: #c0c4cc !important;
}
}
/deep/ .is-process {
    color: #c0c4cc !important;
}
.minHeight{
  min-height: 350px;
}

.seeRule{
  width: 100%;
  font-size:14px ;
  color: #387BFC;
  text-align: right;
  margin-bottom:45px ;
  cursor: pointer;
}
// /deep/ .el-radio__inner{
//   height: 20px !important;
//   width: 20px !important;
//   border:1px solid #387BFC;
//   background-color: #387BFC;
// }
// /deep/.el-radio__input.is-checked .el-radio__inner::after{
//   height: 12px;
//   width: 12px;
//   border: 2px solid white;
//   background-color: #387BFC !important;
// }
// /deep/ .el-radio__input .el-radio__inner::after{
//   height: 12px;
//   width: 12px;
//   content: '';
//   border: 2px solid white;
//   background-color: white !important;
// }
/deep/ .el-input {
      border-radius:6px;background-color: white !important;
}
/deep/ .el-input__inner{
  background-color: white !important;
  border: 1px solid #BACBEC !important;
}
/deep/ .el-form-item{
  width: 100%;
}
/deep/ .el-form-item__content{
  width: calc(100% - 116px);
}
/deep/ .el-form-item__label{
  font-size: 14px;
  color: #333333 !important;
  font-weight: 400;
}
.tip{
  color: #999999;
  font-size: 14px;
  margin-bottom: 80px;
}
.tip_success{
  font-size: 14px;
  margin-bottom: 15px;
}
.main_bottomss{
  display: flex;
  justify-content: space-between;
  align-items: center;
  /deep/ .el-button{
    width: 240px;
    height: 40px;
  }
  /deep/ .el-button--cancel {

    background-color: #ebf2ff;
    border-radius: 4px;
    font-size: 14px;
    color: #387bfc;
    padding: 0px;
    border: 1px solid #387bfc;
}
}

.way{
  /deep/ .el-form-item {
    margin-bottom: 10px;
  }
}
/deep/ .el-step__title{
  line-height: 28px;
}
/deep/ .is-process{
  font-weight: normal;
}
/deep/ .is-icon{
  width:24px ;
}
.step_text2_color2{
  color: #999 !important;
}
.nopass{
  color: #F56C6C;
}
.pass{
  color:#19BE6B ;
}
.name{
  color: #333333;
}
.time{
  color: #333333;
}
/deep/ .is-text{
  border: none;
}
/deep/ .el-step__icon{
  background: rgb(241,249,255) !important;
}
.RegisterComponent_container {
  width: 100%;
  height: 100%;

  .login_container_right_main_header2 {
    margin-top: 10px;
    height: 30px;
    font-size: 22px;
    // text-align: center;
  }
  .login_container_right_main_input {
    margin-top: 20px;
    //     display:flex;
    // align-items: center;
    // justify-content: space-between;
  }

  .login_container_right_main_input3 {
    margin-top: 20px;
    display:flex;
    align-items: center;
    justify-content: space-between;
    .label{
      width: 116px;
      font-size: 14px;
    }
       /deep/ .el-input__inner {
      border-radius:6px;background-color: white;
      border: 1px solid #BACBEC;
    }
  }
  .sendClass{
    background-color: #E5ECFA;
    color: #666666;
    border: 1px solid #BACBEC;
  }
  .unSendClass{
    background-color: rgba(57, 125, 255, 1);
    color: white;
    border: 1px solid #BACBEC;
  }
  .login_container_right_main_input2 {
    width: 100%;
    display: flex;
    align-items: center;border-radius: 6px;
    /deep/ .el-input__inner {
      border-radius:6px 0 0 6px;background-color: white;
      border: none !important;
      border-right:1px solid #BACBEC !important;
    }
    .login_container_right_main_input2_getCode{
      width: 160px;
      border-radius: 0px 6px 6px 0px;font-size: 12px;
      display: flex;justify-content: center;align-items: center;
      cursor: pointer;
    }
    // .canClick{
    //   color: rgba(57, 125, 255, 1);
    // }
    .login_container_right_main_input2_separate{
      height: 20px;
      width: 1px;
      background-color: rgba(206, 206, 206, 1)
    }
  }
  .login_container_right_main_input4 {
    display: flex;background-color: rgba(231, 234, 243, 0.6);
    align-items: center;border-radius: 8px;
    /deep/ .el-input__inner {
      border-radius: 8px;background-color: transparent;
    }
    .login_container_right_main_input2_getCode{
      width: 120px;background-color: transparent;
      border-radius: 0px 6px 6px 0px;font-size: 12px;
      display: flex;justify-content: center;align-items: center;
    }
    .canClick{
      color: rgba(57, 125, 255, 1);
    }
    .login_container_right_main_input2_separate{
      height: 20px;
      width: 1px;
      background-color: rgba(206, 206, 206, 1)
    }
  }
  .login_container_right_main_operate {
    display: flex;
    justify-content: space-between;
    color: rgba(57, 125, 255, 1);
    font-size: 15px;
    margin-top: 20px;
  }

  .login_container_right_main_button {
    margin-top: 100px;

    /deep/ .el-button {
      width: 100%;
      height: 40px;
      background-color: rgba(57, 125, 255, 1);
      border-radius: 8px;
      border: 0px;
    }

    /deep/ .el-button:hover {
      background-color: rgba(57, 125, 255, 0.8);
    }
  }

  .login_container_right_main_register{
    margin-top: 60px;
    display: flex;justify-content: center;align-items: center;
    font-size: 15px;
    color: rgba(153, 153, 153, 1);
    .login_container_right_main_register_register{
      color: rgba(57, 125, 255, 1);
    }
  }
}

/deep/ .el-input__inner {
  width: 100%;
  height: 40px;
  border-radius: 8px;
  background-color: rgba(231, 234, 243, 0.6);
  // background-color: white !important;
  // border: 1px solid rgba(231, 234, 243,1) !important;
  padding-left: 20px;
  border: 0px;

}

/deep/ .el-input__icon {
  line-height: 40px;
}

/deep/ .el-input__inner::placeholder {
  color: rgba(51, 51, 51, 0.6);
}
.register_steps{
  margin-bottom: 60px;
  ///deep/ .is-finish{
  //  color: #19BE6B;
  //}
  ///deep/ .is-process{
  //  color: #4B95F3;
  //}
}
.login_container_right_main_step2{
  height: 320px;margin-top: 20px;
  .login_container_right_main_button{
    padding-top: 120px;
  }
  /deep/ .el-form-item__error{
    padding-left: 20px;
  }
}
.backToLogin{
  // height: 320px;
  display: flex;justify-content: flex-end;
  flex-direction: column;
  .login_container_right_main_button{
    width: 100%;
  }
  .backToLogin_success{
    flex: 1;font-size: 22px;
    display: flex;justify-content: center;align-items: center;
    flex-direction: column;
    /deep/ .svg-icon{
      font-size: 80px;
      margin-bottom: 20px;
    }
  }
  .login_container_right_main_button{
    margin-top: 0;
  }
}
</style>

